<template>
  <div class="rules">
    <div class="titles">配置</div>
    <div>
      <div  >
        <div  class="ColClass ColTab">
          <div class="col_title"><Icon type="md-apps" /> 评价年度</div>

           <Tree :data="ruleListData" @on-select-change	="handleToChoiceYear"></Tree>
        </div>
        <div  class="ColClass">
          <Tabs value="name1">
            <TabPane label="加减分设置" name="name1">
              <div class="add_NewRule" @click="addNewsRule">+ 新增规则</div>
              <div class="allSetting">全局设置</div>
              <div style="margin: 0 10px">
                <Table stripe :columns="columnsSetting" :data="ruleSettingData"></Table>
              </div>
            </TabPane>
            <TabPane label="初评比例设置" name="name2">
              <div>
                <div style="margin:10px">
                  <div style="font-size:15px;margin-bottom:10px">规上企业</div>
                  <div>
                    <Table stripe :columns="columnstop" :data="dataTop"></Table>
                    <Page :total="1" show-total show-elevator style="float:right;padding-right:20px"/>
                  </div>
                </div>
                <div style="margin:40px 10px 10px 10px;">
                  <div>规下企业</div>
                  <div>
                    <Table stripe :columns="columnstop" :data="dataDown"></Table>
                    <Page :total="1" show-total show-elevator style="float:right;padding-right:20px"/>
                  </div>
                </div>
              </div>
            </TabPane>
          </Tabs>
        </div>
      </div>
    </div>
    <Drawer
      title="新增"
      v-model="drawerShow"
      width="520"
      :mask-closable="false"
      :styles="styles"
    >
      <Row style="margin:20px 0">
        <Col span="6"> 加分项名称 </Col>
        <Col span="18">
          <Input
            v-model="formItem.name"
            placeholder="Enter something..."
            style="width: 300px"
          />
        </Col>
      </Row>
      <Row style="margin:20px 0">
        <Col span="6"> 详细 </Col>
        <Col span="18">
          <Input
            v-model="formItem.detail"
            placeholder="Enter something..."
            style="width: 300px"
            type="textarea"
          />
        </Col>
      </Row>
      <Row style="margin:20px 0">
        <Col span="6"> 类型 </Col>
        <Col span="18">
          <Select v-model="formItem.type" style="width: 300px" @on-change="changeKind">
            <Option
              v-for="item in kindList"
              :value="item.value"
              :key="item.value"
              >{{ item.label }}</Option
            >
          </Select>
        </Col>
      </Row>
      <Row style="margin:20px 0">
        <Col span="6"> 增减情况 </Col>
        <Col span="18">
          <Select v-model="formItem.situation" style="width: 300px">
            <Option
              v-for="item in selectList"
              :value="item.value"
              :key="item.value"
              >{{ item.label }}</Option
            >
          </Select>
        </Col>
      </Row>
      <Row style="margin:20px 0">
        <Col span="6"> 增减数值 </Col>
        <Col span="18">
          <Input
            v-model="formItem.point"
            placeholder="Enter something..."
            style="width: 300px"
          >
          <span slot="append" v-if="kindListValue ==0">分</span>
          <span slot="append" v-if="kindListValue ==1">%</span>
          </input>
        </Col>
      </Row>
      <Row style="margin:20px 0">
        <Col span="6"> 备注 </Col>
        <Col span="18">
          <Input
            v-model="formItem.remarks"
            placeholder="Enter something..."
            style="width: 300px;height:260px"
            type="textarea"
          />
        </Col>
      </Row>
      <div class="drawer-footer">
        <Button style="margin-right: 8px" @click="dropCancel "
          >取消</Button
        >
        <Button type="primary" @click="dropSubmit" v-if="!isEdit">增加</Button>
        <Button type="primary" @click="dropSubmit" v-else>编辑</Button>
      </div>
    </Drawer>
    <Modal
        v-model="guishangModal"
        title="编辑"
        @on-ok="okguishang"
        @on-cancel="cancelguishang">
        <div>
          <div style="margin:10px 0;">
            行业名称
            <Input v-model="hangyevalue" placeholder="Enter something..." style="width: 200px" />
          </div>
          <div style="margin:10px 0;">
            <Input v-model="hangyevalue2" placeholder="Enter something..." style="width: 102px" />
             &lt;= A &lt;= 
            <Input v-model="hangyevalue3" placeholder="Enter something..." style="width: 102px" />
          </div>
          <div style="margin:10px 0;">
            <Input v-model="hangyevalue4" placeholder="Enter something..." style="width: 102px" />
             &lt;= B &lt;= 
            <Input v-model="hangyevalue5" placeholder="Enter something..." style="width: 102px" />
          </div>
          <div style="margin:10px 0;">
            <Input v-model="hangyevalue6" placeholder="Enter something..." style="width: 102px" />
             &lt;= C &lt;= 
            <Input v-model="hangyevalue7" placeholder="Enter something..." style="width: 102px" />
          </div>
          <div style="margin:10px 0;">
            <Input v-model="hangyevalue8" placeholder="Enter something..." style="width: 102px" />
             &lt;= D &lt;= 
            <Input v-model="hangyevalue9" placeholder="Enter something..." style="width: 102px" />
          </div>
        </div>
    </Modal>
  </div>
</template>
<script>
import { mapActions, mapState, mapMutations } from "vuex";
export default {
  data() {
    return {
      hangyevalue9:"100%",
      hangyevalue8:"97%",
      hangyevalue7:"97%",
      hangyevalue6:"70%",
      hangyevalue5:"70%",
      hangyevalue4:"20%",
      hangyevalue3:"20%",
      hangyevalue2:"0%",
      hangyevalue:"全行业",
      guishangModal:false,
      value: "",
      kindListValue: 0,//0分  1比例
      kindList: [
        {
          value: 0,
          label: "分值",
        },
        {
          value: 1,
          label: "比例",
        },
      ],
      selectValue: 0,
      selectList: [
        {
          value: 0,
          label: "加分",
        },
        {
          value: 1,
          label: "减分",
        },
      ],
      drawerShow: false,
      data1: [
        {
          name: 1,
        },
      ],
      columnsSetting: [
        {
          title: "序号",
          type: "index",
          width: 100,
          align: "center",
        },
        {
          title: "加分项名称",
          key: "name",
          align: "center",
        },
        {
          title: "详细",
          key: "detail",
          align: "center",
          width: 200,
        },
        {
          title: "类型",
          key: "type",
          align: "center",
          width: 200,
          render: (h, params) => {
            if (params.row.type == 1) {
              return h("div", "比例");
            } else {
              return h("div", "分值");
            }
          },
        },
        {
          title: "增减情况",
          key: "situation",
          align: "center",
          width: 100,
          render: (h, params) => {
            if (params.row.situation == 1) {
              return h("div", "减");
            } else {
              return h("div", "增");
            }
          },
        },
        {
          title: "分值比例",
          key: "point",
          align: "center",
          width: 100,
        },
        {
          title: "备注",
          key: "remarks",
          align: "center",
          width: 200,
        },
        {
          title: "操作",
          key: "edit",
          align: "center",
          fixed: "right",
          width: 200,
          render: (h, params) => {
            return h("div", [
              h(
                "Button",
                {
                  props: {
                    type: "primary",
                    size: "small",
                  },
                  style: {
                    marginRight: "10px",
                  },
                  on: {
                    click: () => {
                      this.editRoleList(params);
                    },
                  },
                },
                "编辑"
              ),
              h(
                "Button",
                {
                  props: {
                    type: "error",
                    size: "small",
                  },
                  on: {
                    click: () => {
                      this.remove(params);
                    },
                  },
                },
                "删除"
              ),
            ]);
          },
        },
      ],
      styles: {
        height: "calc(100% - 55px)",
        overflow: "auto",
        paddingBottom: "53px",
        position: "static",
      },
      columnstop: [
        {
          title: "序号",
          type: "index",
          width: 100,
          align: "center",
        },
        {
          title: "行业名称",
          key: "name",
        },
        {
          title: "A",
          key: "A",
        },
        {
          title: "B",
          key: "B",
        },
        {
          title: "C",
          key: "C",
        },
        {
          title: "D",
          key: "D",
        },
        {
          title: "操作",
          key: "edit",
          align: "center",
          width: 280,
          render: (h, params) => {
            return h("div", [
              h(
                "Button",
                {
                  props: {
                    type: "primary",
                    size: "small",
                  },
                  style: {
                    marginRight: "10px",
                  },
                  on: {
                    click: () => {
                      this.editTop(params);
                    },
                  },
                },
                "编辑"
              ),
            ]);
          },
        },
      ],
      dataTop: [
        {
          name: "全行业",
          A: "0%  <= A <= 20%",
          B: "20% <= B <= 70%",
          C: "70% <= C <= 97%",
          D: "97% <= D <=100%",
        },
      ],
      dataDown: [
        {
          name: "全行业",
          A: "0%  <= A <= 20%",
          B: "20% <= B <= 70%",
          C: "70% <= C <= 97%",
          D: "97% <= D <=100%",
        },
      ],
      ruleSettingData: [],
      nowChoiceYearId: 1, //存放当前点击的Id，便于后续索引
      formItem: {
        id: 0,
        name: "",
        detail: "",
        type: 0, // 0分数 1比例
        situation: 0, //0减 ；1增
        point: 0, //分值
        remarks: "",
      },
      isEdit: false,
    };
  },
  computed: {
    ruledataCount() {
      return this.$store.state.rule.dataCount;
    },
    ruleListData() {
      return this.$store.state.rule.ListData;
    },
    dataCount() {
      return this.$store.state.login.user;
    },
  },
  methods: {
    ...mapMutations(["setRule"]),
    ...mapActions([
      "addRuleData",
      "getRuleListData",
      "editRuleData",
      "addRuleList",
      "editRuleList",
      "deleteRuleList",
    ]),
    okguishang(){
      this.guishangModal = false;
    },
    cancelguishang(){
      this.guishangModal = false;
    },
    // 改变类型
    changeKind(event){
      this.kindListValue = event;
    },
    // 选择评价年度
    handleToChoiceYear(event) {
      if (event.length > 0) {
        this.ruleSettingData = event[0].RuleList;
        this.nowChoiceYearId = event[0].id;
      }
    },
    // 编辑规则
    editRoleList(event) {
      this.drawerShow = true;
      this.isEdit = true;
      this.formItem.name = event.row.name;
      this.formItem.detail = event.row.detail;
      this.formItem.type = event.row.type;
      this.formItem.situation = event.row.situation;
      this.formItem.point = event.row.point;
      this.formItem.remarks = event.row.remarks;
      this.formItem.id = event.row.id;
    },
    editTop() {
      this.guishangModal = true;
    },
    // 新增规则
    addNewsRule() {
      this.drawerShow = true;
      this.isEdit = false;
      this.Init();
    },
    dropCancel() {
      this.drawerShow = false;
    },
    // 规则 提交
    dropSubmit() {
      this.drawerShow = false;
      if (!this.isEdit) {
        // 新增
        this.addRuleList({
          fatherId: this.nowChoiceYearId,
          data: {
            name: this.formItem.name,
            detail: this.formItem.detail,
            type: this.formItem.type, // 0分数 1比例
            situation: this.formItem.situation, //0增 ；1减
            point: this.formItem.point, //分值
            remarks: this.formItem.remarks,
          },
        });
      }else{
        // 编辑
        this.editRuleList({
          fatherId:this.nowChoiceYearId,
          id:this.formItem.id,
          data:this.formItem,
        })
      }
    },
    Init() {
      this.formItem.name = "";
      this.formItem.detail = "";
      this.formItem.type = 0;
      this.formItem.situation = 0;
      this.formItem.point = 0;
      this.formItem.remarks = "";
    },
    //删除
    async remove(event) {
      console.log(event)
      this.$Modal.confirm({
        title: "是否删除？",
        onOk: () => {
          console.log("__findEditIndex_",this.nowChoiceYearId,"___findEditIndexChild",this.formItem.id)
          this.deleteRuleList({
            fatherId:this.nowChoiceYearId,
            id:event.row.id,
            data:"",
          })
        },
        onCancel: () => {
          this.$Message.info("取消");
        },
      });
    },
  },
  created() {
    this.getRuleListData(true).then(() => {
      this.ruleSettingData = this.ruleListData[0].RuleList;
    });
  },
};
</script>
<style scoped lang="less">
.rules {
  margin: 20px 0 0 30px;
  .titles {
    font-size: 28px;
    font-weight: 800;

    display: flex;
    justify-content: space-between;
  }
  .ColTab {
    width: 200px;
    float: left;
  }
  .ColClass {
    border: 1px solid #eee;
    height: 68vh;

    .col_title {
      height: 37px;
      line-height: 37px;
      font-size: 18px;
      border-bottom: 1px solid #eee;
      padding-left: 18px;
    }
    .col_Years {
      font-size: 14px;
      height: 30px;
      line-height: 30px;
      padding-left: 18px;
      margin-top: 5px;
    }
    .col_Years:active {
      background: #f0faff;
    }
    .col_Years:focus {
      background: #f0faff;
    }

    .add_NewRule {
      height: 40px;
      line-height: 40px;
      margin: 10px;
      widows: 100%;
      text-align: center;
      font-size: 14px;
      border: 1px dashed #ccc;
      border-radius: 6px;
    }
    .add_NewRule:hover {
      border: 1px dashed #2d8cf0;
      color: #2d8cf0;
    }
    .allSetting {
      margin: 5px 10px;
    }
  }
}
</style>
<style>
.drawer-footer {
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  border-top: 1px solid #e8e8e8;
  padding: 10px 16px;
  text-align: right;
  background: #fff;
}
.ivu-tree-title {
  width: 160px;
}
</style>